import { assignVars, createGlobalThemeContract, globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';
import { darken, darkenAbs, fallBackGlobalStyle, modifyHSLColorLightness } from '../../theme/tools';
import { tableListStyle } from '../tableList/tableList.css';
import { tableStyle } from '../table/table.css';
import { lightColor } from '../../theme/colors/colorLight.css';
import { darkColor } from '../../theme/colors/colorDark.css';

const MENU_BG_COLOR = `linear-gradient(${darkenAbs(vars.color.windowBackground, 0.05)}, ${darkenAbs(vars.color.windowBackground, 0.15)})`;
const SUB_MENU_BG_COLOR = 'transparent';
const HIGHLIGHT_COLOR = darken(vars.color.windowBackground, 0.15);
const SELECTED_COLOR = darkenAbs(vars.color.accent, 0.15);
const TEXT_COLOR = vars.color.text;
const SELECTED_TEXT_COLOR = vars.color.buttonText;

const BG_COLOR_LIGHT = `linear-gradient(${modifyHSLColorLightness(lightColor.color.windowBackground, -0.05)}, ${modifyHSLColorLightness(lightColor.color.windowBackground, -0.15)})`;
const BG_COLOR_DARK = `linear-gradient(${modifyHSLColorLightness(darkColor.color.windowBackground, 0.05)}, ${modifyHSLColorLightness(darkColor.color.windowBackground, 0.15)})`;
const HOVER_COLOR_LIGHT = modifyHSLColorLightness(lightColor.color.windowBackground, -0.15);
const HOVER_COLOR_DARK = modifyHSLColorLightness(darkColor.color.windowBackground, 0.15);

export const menuVars = createGlobalThemeContract(
	{
		menuBgColor: null,
		subMenuBgColor: null,
		hoverBgColor: null,
		selectedBgColor: null,
		textColor: null,
		selectedTextColor: null,
	},
	(_value, path) => `knno-menu-${path.join('-')}`.replace(/[A-Z]/g, (t) => `-${t.toLowerCase()}`)
);

export const foldableMenuStyle = style({
	overflow: 'hidden',
	overflowY: 'auto',
	background: MENU_BG_COLOR,
	color: TEXT_COLOR,
	vars: assignVars(menuVars, {
		menuBgColor: MENU_BG_COLOR,
		subMenuBgColor: SUB_MENU_BG_COLOR,
		hoverBgColor: HIGHLIGHT_COLOR,
		selectedBgColor: SELECTED_COLOR,
		textColor: TEXT_COLOR,
		selectedTextColor: SELECTED_TEXT_COLOR,
	}),
});

fallBackGlobalStyle(
	`${foldableMenuStyle}`,
	{
		background: BG_COLOR_LIGHT,
		vars: assignVars(menuVars, {
			menuBgColor: BG_COLOR_LIGHT,
			subMenuBgColor: SUB_MENU_BG_COLOR,
			hoverBgColor: HOVER_COLOR_LIGHT,
			selectedBgColor: modifyHSLColorLightness(lightColor.color.accent, -0.15),
			textColor: TEXT_COLOR,
			selectedTextColor: SELECTED_TEXT_COLOR,
		}),
	},
	{
		background: BG_COLOR_DARK,
		vars: assignVars(menuVars, {
			menuBgColor: BG_COLOR_DARK,
			subMenuBgColor: SUB_MENU_BG_COLOR,
			hoverBgColor: HOVER_COLOR_DARK,
			selectedBgColor: modifyHSLColorLightness(lightColor.color.accent, -0.15),
			textColor: TEXT_COLOR,
			selectedTextColor: SELECTED_TEXT_COLOR,
		}),
	}
);

globalStyle(`${foldableMenuStyle}>div.caption`, {
	position: 'relative',
	display: 'flex',
	alignItems: 'center',
	height: '3em',
	cursor: 'pointer',
	padding: '0 0.4em',
	fontSize: '1.3em',
	// borderRadius: vars.layout.smallRadius,
	fontWeight: 'bold',
	outline: 'none',
	userSelect: 'none',
});

globalStyle(`${foldableMenuStyle}>div.caption>div.icon`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: '1.6em',
});

globalStyle(`${foldableMenuStyle}>div.caption>div.icon>svg`, {
	display: 'flex',
	alignItems: 'center',
	justifyContent: 'center',
	width: '1.3em',
	height: '1.3em',
	fill: menuVars.textColor,
});

globalStyle(`${foldableMenuStyle}>div.caption:not(.group).selected>div.icon>svg`, {
	fill: menuVars.selectedTextColor,
});

globalStyle(`${foldableMenuStyle}>div.caption>div.label`, {
	flex: 1,
});

globalStyle(`${foldableMenuStyle}>div.caption>div.arrow`, {
	display: 'none',
});

globalStyle(`${foldableMenuStyle}>div.caption.group>div.arrow`, {
	display: 'block',
});

globalStyle(`${foldableMenuStyle} svg`, {
	fill: menuVars.textColor,
	transition: 'transform 0.3s',
});

globalStyle(`${foldableMenuStyle}>div.caption.group.selected>div.arrow>svg`, {
	transform: 'rotate(180deg)',
});

globalStyle(`${foldableMenuStyle} div.caption:focus-visible`, {
	backgroundColor: menuVars.hoverBgColor,
});

globalStyle(`${foldableMenuStyle} div.caption:hover`, {
	backgroundColor: menuVars.hoverBgColor,
});

globalStyle(`${foldableMenuStyle} div.caption:not(.group).selected`, {
	backgroundColor: menuVars.selectedBgColor,
	color: menuVars.selectedTextColor,
});

globalStyle(`${foldableMenuStyle} .${tableStyle}.${tableListStyle}`, {
	backgroundColor: menuVars.subMenuBgColor,
	border: 'none',
	borderRadius: 0,
});

globalStyle(`${foldableMenuStyle} .${tableStyle}.${tableListStyle} :is(td,th)`, {
	backgroundColor: 'transparent',
});

globalStyle(`${foldableMenuStyle} .${tableStyle}.${tableListStyle} tr>:is(td,th):hover`, {
	backgroundColor: menuVars.hoverBgColor,
});

globalStyle(`${foldableMenuStyle} .${tableStyle}.${tableListStyle} tr.active>:is(td,th)`, {
	backgroundColor: menuVars.selectedBgColor,
	color: menuVars.selectedTextColor,
});

globalStyle(`${foldableMenuStyle} .${tableStyle}.${tableListStyle} tr.active>:is(td,th)>span.arrow>svg`, {
	fill: menuVars.selectedTextColor,
});
